<template>
    <div style="margin: 20px;">
        <el-container>           
        <el-header >        
          <span style="font-size:60px">发票页</span>
          <el-link type="primary" href="/#/reInvoice" style="float:right"><b>返回</b></el-link>
        </el-header>
        <el-main style="text-align:left">               
            
            <div>
            <table> 
                    <tr>
                        <td>发票号</td>        
                
                        <td><el-input v-model="invoiceId"  placeholder="发票号" :disabled='true'></el-input></td>
                        <td>
                          <el-button type="text" :disabled="isFillOrRe" @click="dialogVisible = true">修改发票号</el-button>
                          <el-dialog title="修改发票号" :visible.sync="dialogVisible">
                            新的发票号:<el-input v-model="newInvoiceId" autocomplete="off"></el-input>
                          <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="changeInvoiceId">确 定</el-button>
                          </div>
                          </el-dialog>
                        </td><td></td>
                        <td>病历号</td>
                        <td><el-input v-model="patientId"  placeholder="病历号" :disabled='true'></el-input></td><td></td>
                        <td>日期</td>
                        <td><el-input v-model="date"  placeholder="日期" :disabled='true'></el-input></td>
                    </tr>
                    
                </table>
            </div>
                
                
                <el-table
                    :data="tableData"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort = "{prop: 'date'}"
                    >
                    <el-table-column
                      prop="project"
                      label="项目名"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="单价"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="number"
                      label="数量"
                      width="120">
                    </el-table-column>
                   
                    <el-table-column
                      prop="singleCost"
                      label="金额"
                      width="200">
                      <!--<template slot-scope="scope">{{ scope.row.datetime }}</template>-->
                    </el-table-column>
                    
                  </el-table>
                  <table>
                    <tr>
                  <td>
                  总金额:</td>
                  <td><el-input v-model="totalMoney"  placeholder="总金额" :disabled='true'></el-input>
                  </td>
                  <td>
                  <el-button type="primary" @click="print" icon="el-icon-printer">打印</el-button>
                  </td></tr>
                  </table>
              </el-main>
            </el-container>
   </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
</style>

<script>
  export default {
    
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    changeInvoice:function(newInvoiceId){
      this.invoiceId=newInvoiceId;
      this.dialogVisible=false;
    },
    print(){

    }

    },
    data() {
      return {
        isFillOrRe:false,
        dialogVisible:false,
        newInvoiceId:'',

        invoiceId:'120003301',
        patientId:'00000001',
        date:'2019-08-12',
        totalMoney:'500',

        tableData: [{
          project:'CT',
          price: '200',
          number:'1',
          singleCost:'200' ,
          
        }, {
         project:'麻醉剂',
          price: '50',
          number:'2',
          singleCost:'100' ,
        }, {
          project:'喉镜',
          price: '200',
          number:'1',
          singleCost:'200' ,
        }
        ]
      }
    }
  }
</script>